<template>
  <el-dialog
    v-model="showDialog"
    :title="t('needQuestionnaire')"
    width="700px"
    class="diy-dialog-wrap"
    :destroy-on-close="true"
  >
    <div class="max-h-[650px] overflow-y-auto">
      <h3 class="panel-title">{{ t("baseInfo") }}</h3>
      <el-descriptions :column="2">
        <el-descriptions-item :label="t('name')" label-align="right">
          {{ formData.username || "--" }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('phone')" label-align="right">
          {{ formData.phone || "--" }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('customType')" label-align="right">
          {{ customTypes[formData.dingzhi_type] || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 2"
          :label="t('relatedOrder')"
          label-align="right"
        >
          {{ formData.dingzhi_order_sn || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 3"
          :label="t('isNeedsOptimization')"
          label-align="right"
        >
          {{ judgeTypes[formData.is_needs_questionnaire] || "--" }}
        </el-descriptions-item>
      </el-descriptions>
      <h3 v-if="formData.dingzhi_type == 1" class="panel-title">{{ t("wineStyle") }}</h3>
      <el-descriptions :column="2">
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('aromaType')"
          label-align="right"
        >
          {{ questionnaire.aromaType || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('alcoholRange')"
          label-align="right"
        >
          {{ questionnaire.alcoholRange || "--" }}%vol
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('taste')"
          label-align="right"
        >
          {{ questionnaire.taste || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('flavour')"
          label-align="right"
        >
          {{ questionnaire.flavour || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('priceRange')"
          label-align="right"
        >
          {{ questionnaire.priceRange || "--" }}
        </el-descriptions-item>
      </el-descriptions>
      <h3 v-if="formData.dingzhi_type == 1" class="panel-title">
        {{ t("refinedTasting") }}
      </h3>
      <el-descriptions :column="2">
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('intensity')"
          label-align="right"
        >
          {{ questionnaire.intensity || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('layer')"
          label-align="right"
        >
          {{ questionnaire.layer || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('comfort')"
          label-align="right"
        >
          {{ questionnaire.comfort || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('demand')"
          label-align="right"
        >
          {{ questionnaire.demand || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('lips')"
          label-align="right"
        >
          {{ questionnaire.lips || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('lipsTaste')"
          label-align="right"
        >
          {{ questionnaire.lipsTaste || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('tasteStrength')"
          label-align="right"
        >
          {{ questionnaire.tasteStrength || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('richFeel')"
          label-align="right"
        >
          {{ questionnaire.richFeel || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('harmoniousFeel')"
          label-align="right"
        >
          {{ questionnaire.harmoniousFeel || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('sustain')"
          label-align="right"
        >
          {{ questionnaire.sustain || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('aftertaste')"
          label-align="right"
        >
          {{ questionnaire.aftertaste || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('personality')"
          label-align="right"
        >
          {{ questionnaire.personality || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('drunkSpeed')"
          label-align="right"
        >
          {{ questionnaire.drunkSpeed || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('wakeSpeed')"
          label-align="right"
        >
          {{ questionnaire.wakeSpeed || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('complexity')"
          label-align="right"
        >
          {{ questionnaire.complexity || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="formData.dingzhi_type == 1"
          :label="t('balance')"
          label-align="right"
        >
          {{ questionnaire.balance || "--" }}
        </el-descriptions-item>
      </el-descriptions>
      <h3
        v-if="
          formData.dingzhi_type == 2 ||
          (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
        "
        class="panel-title"
      >
        {{ t("direction") }}
      </h3>
      <el-descriptions :column="2">
        <el-descriptions-item
          v-if="
            formData.dingzhi_type == 2 ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('direction')"
          label-align="right"
        >
          {{ questionnaire.direction || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="
            formData.dingzhi_type == 2 ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('remark')"
          label-align="right"
        >
          {{ questionnaire.remark || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="
            formData.dingzhi_type == 2 ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('priceRange')"
          label-align="right"
        >
          {{ questionnaire.priceRange || "--" }}
        </el-descriptions-item>
      </el-descriptions>
      <h3
        v-if="
          formData.dingzhi_type == 2 ||
          (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
        "
        class="panel-title"
      >
        {{ t("optimizeDetails") }}
      </h3>
      <el-descriptions :column="2">
        <el-descriptions-item
          v-if="
            formData.dingzhi_type == 2 ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('alcoholRange')"
          label-align="right"
        >
          {{ questionnaire.alcoholRange || "--" }}%vol
        </el-descriptions-item>
        <el-descriptions-item
          v-if="
            formData.dingzhi_type == 2 ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('intensity')"
          label-align="right"
        >
          {{ questionnaire.intensity || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="
            formData.dingzhi_type == 2 ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('layer')"
          label-align="right"
        >
          {{ questionnaire.layer || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="
            formData.dingzhi_type == 2 ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('comfort')"
          label-align="right"
        >
          {{ questionnaire.comfort || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="
            formData.dingzhi_type == 2 ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('demand')"
          label-align="right"
        >
          {{ questionnaire.demand || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="
            formData.dingzhi_type == 2 ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('lipsEnhance')"
          label-align="right"
        >
          {{ questionnaire.lips || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="
            formData.dingzhi_type == 2 ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('lipsTaste')"
          label-align="right"
        >
          {{ questionnaire.lipsTaste || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="
            formData.dingzhi_type == 2 ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('tasteStrengthEnhance')"
          label-align="right"
        >
          {{ questionnaire.tasteStrength || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="
            formData.dingzhi_type == 2 ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('sustain')"
          label-align="right"
        >
          {{ questionnaire.sustain || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="
            formData.dingzhi_type == 2 ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('aftertaste')"
          label-align="right"
        >
          {{ questionnaire.aftertaste || "--" }}
        </el-descriptions-item>
      </el-descriptions>
      <h3
        v-if="
          [1, 2].includes(formData.dingzhi_type) ||
          (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
        "
        class="panel-title"
      >
        {{ t("sceneAndSpecialNeeds") }}
      </h3>
      <el-descriptions :column="2">
        <el-descriptions-item
          v-if="
            [1, 2].includes(formData.dingzhi_type) ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('scene')"
          label-align="right"
        >
          {{ questionnaire.scene || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="
            [1, 2].includes(formData.dingzhi_type) ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('quantity')"
          label-align="right"
        >
          {{ questionnaire.quantity || "--" }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="
            [1, 2].includes(formData.dingzhi_type) ||
            (formData.dingzhi_type == 3 && formData.is_needs_questionnaire == 1)
          "
          :label="t('specialNeeds')"
          label-align="right"
        >
          {{ questionnaire.specialNeeds || "--" }}
        </el-descriptions-item>
      </el-descriptions>
      <h3 class="panel-title">{{ t("customizedService") }}</h3>
      <el-descriptions :column="2">
        <el-descriptions-item :label="t('needPackageDesign')" label-align="right">
          {{ judgeTypes[formData.dingzhi_bz_sj] || "--" }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('expectedDeliveryCycle')" label-align="right">
          {{ formData.deliver_day || "--" }} {{ t("days") }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('bartender')" label-align="right">
          {{ formData.order_bartender?.name || "--" }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDialog = false">{{ t("cancel") }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { t } from "@/lang";

const showDialog = ref(false);
const formData = ref<any>({});
const questionnaire = ref<any>({});
const customTypes = ref<any>({
  1: "全新定制",
  2: "基于现有酒体优化",
  3: "自行寄样对标调制",
});
const judgeTypes = ref<any>({
  0: "否",
  1: "是",
});
const setFormData = (data: any) => {
  console.log(data);
  formData.value = data;
  if (data.needs_questionnaire) {
    questionnaire.value = JSON.parse(data.needs_questionnaire);
  } else {
    questionnaire.value = JSON.parse(data.order_alcohol[0]?.needs_questionnaire);
    formData.value.order_bartender = data.order_bartender ? data.order_bartender : data.order_alcohol[0]?.order_bartender;
  }
  showDialog.value = true;
};

defineExpose({
  showDialog,
  setFormData,
});
</script>
<style lang="scss" scoped>
.diy-dialog-wrap .el-form-item__label {
  height: auto !important;
}
.notes-form .el-dialog__body .el-form-item {
  margin-bottom: 0px !important;
}
.panel-title {
  color: var(--el-color-primary);
}
:deep(.el-descriptions__label) {
  font-weight: 500;
}
</style>
